<template>
  <div>
    <div class="search">
      <div class="input">公告标题：<el-input size="mini" v-model="title" maxlength="28"></el-input></div>
      <el-button type="primary" @click="getdatalist">搜索</el-button>
    </div>
    <div class="form">
      <div class="add">
        <el-button
          type="primary"
          size="small"
          @click="
            state = 1
            ;(drawer = true), (showtitle = '新增公告')
          "
          >新增 +</el-button
        >
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="getList">
        <el-tab-pane label="已发布" name="1"></el-tab-pane>
        <el-tab-pane label="未发布" name="0"></el-tab-pane>
      </el-tabs>
      <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="index" label="序号" align="center" width="50"> </el-table-column>
        <el-table-column prop="number" label="公告编号" align="center"> </el-table-column>
        <el-table-column prop="title" label="公告标题" align="center" width="450"> </el-table-column>
        <el-table-column prop="author" label="发布单位" align="center"> </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row, 1), (state = 2)" type="text" size="small" style="color: #ec4b24"
              >详情</el-button
            >
            <el-button
              @click="handleClick(scope.row, 2)"
              type="text"
              size="small"
              style="color: #888888"
              v-show="activeName == 1"
              >撤回</el-button
            >
            <el-button
              @click="handleClick(scope.row, 3)"
              type="text"
              size="small"
              style="color: #888888"
              v-show="activeName == 0"
              >发布</el-button
            >
            <el-button
              @click="handleClick(scope.row, 4), (state = 3)"
              type="text"
              size="small"
              style="color: #0a7aff"
              v-show="activeName == 0"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination layout="prev, pager, next" :total="total * 10" @current-change="changesize" class="page">
        </el-pagination>
      </div>
    </div>
    <el-drawer :title="showtitle" :visible.sync="drawer" :before-close="handleClose" :direction="direction" size="55%">
      <addpage v-show="state == 1"></addpage>
      <deTails :detailsmessage="deTailsmessage" :activities="activities" v-show="state == 2"></deTails>
      <edit v-show="state == 3" :detailsmessage="deTailsmessage" :userid="id"></edit>
    </el-drawer>
  </div>
</template>

<script>
import * as admin from '@/api/admin'
import Seats from '@/api/Seats'
import addpage from './addpage/addpage.vue'
import deTails from './details/details.vue'
import edit from './edit/edit.vue'
import api from '@/api/api'
export default {
  data() {
    return {
      activeName: '1',
      showtitle: '',
      id: 0,
      state: 0,
      total: '',
      drawer: false,
      direction: 'rtl',
      tableData: [],
      current: '1',
      limit: '9',
      title: '',
      deTailsmessage: {},
      activities: [],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    changesize(val) {
      this.current = val
      this.getdatalist()
    },
    getdatalist() {
      Seats.Notice(this.current, this.limit, this.activeName, this.title).then(res => {
        this.tableData = res.data.noticeList
        this.total = res.data.pages
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    Del(scope) {
      this.$confirm('确认删除？')
        .then(_ => {
          Seats.del(scope.id, this.token).then(res => {
            if (res.code == 200) {
              this.getdatalist()
              this.$message({
                message: '已删除！',
                type: 'success',
              })
            }
          })
        })
        .catch(_ => {
          this.$message({
            message: '已取消',
            type: 'info',
          })
        })
    },
    getList() {
      admin.getnotice(this.current, this.limit, this.title, this.activeName).then(e => {
        this.tableData = e.data.noticeList
        this.total = e.data.pages
      })
    },
    handleClick(scope, val) {
      switch (val) {
        case 1:
          this.drawer = true
          this.id = scope.id
          Seats.getNoticeMessage(this.id).then(res => {
            this.showtitle = '公告详情'
            this.deTailsmessage = res.data
          })
          api.getNoticeClue(this.id).then(res => {
            this.activities = res.data
          })
          break
        case 2:
          this.id = scope.id
          Seats.updateStatus(this.id, 0).then(e => {
            if (e.code == 200) {
              this.activeName = '0'
              this.getList()
              this.$message({
                message: '已撤回！',
                type: 'success',
              })
            }
          })
          break
        case 3:
          this.id = scope.id
          Seats.updateStatus(this.id, 1).then(e => {
            if (e.code == 200) {
              this.activeName = '1'
              this.getList()
              this.$message({
                message: '发布成功！',
                type: 'success',
              })
            }
          })
          break
        case 4:
          this.drawer = true
          this.id = scope.id
          Seats.getNoticeMessage(this.id).then(res => {
            this.showtitle = '公告编辑'
            this.deTailsmessage = res.data
          })
          break
        default:
          break
      }
    },
    tip() {
      this.drawer = false
      this.getdatalist()
    },
    handleClose(done) {
      done()
    },
  },
  components: {
    addpage,
    deTails,
    edit,
  },
}
</script>

<style lang="scss" scoped>
@import './notice.scss';
</style>
